<template>
	<view class="app">
		<view class="order-info box-card">
			<u-form :model="admin" ref="uForm" >
				<u-form-item  prop="orderSiteId" label="账号" :label-align="labelAlign" :label-width="labelWidth">
					<u-input v-model="admin.adminName" type="text"  placeholder="请输入账号" />
				</u-form-item>
				<u-form-item  prop="orderSiteId" label="密码" :label-align="labelAlign" :label-width="labelWidth">
					<u-input v-model="admin.adminPassword" type="password"  placeholder="请输入密码" />
				</u-form-item>
				<u-form-item  prop="orderSiteId" label="手机号" :label-align="labelAlign" :label-width="labelWidth">
					<u-input v-model="admin.adminPhone" type="text"  placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item  prop="orderSiteId" label="真实姓名" :label-align="labelAlign" :label-width="labelWidth">
					<u-input v-model="admin.siteMasterName" type="text"  placeholder="请输入真实姓名" />
				</u-form-item>
				<u-form-item  prop="orderSiteId" label="期望区域" :label-align="labelAlign" :label-width="labelWidth">
					<view class="address-goto-choose" @click="chooseAddress">
						<text class="address-goto-choose-tips">{{ addressShow }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<city-select v-model="citySelectShow" @city-change="cityChange"></city-select>
				</u-form-item>	
				<u-form-item  prop="orderSiteId" label="家庭住址" :label-align="labelAlign" :label-width="labelWidth">
					<u-input v-model="admin.siteMasterHomeAddress" type="text"  placeholder="请输入家庭住址" />
				</u-form-item>
				
			</u-form>
		</view>
		<view class="waste-content box-card">
			<view class="waste-content">
				<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
					<view class="waste-estimate-title-left">身份证正反面照片：</view>
				</view>				
				<view class="waste-content-input" style="display: flex;">
					<view style="flex:1;width:50%;display: flex;justify-content: center;">
						<u-upload ref="FrontImguUpload"  width="160rpx" height="160rpx" max-count="1" 
						upload-text="国徽面" :action="uploadUrl" :header="uploadHeader" :file-list="adminFrontImgList" ></u-upload>
					</view>
					<view style="flex:1;width:50%;display: flex;justify-content: center;">
						<u-upload ref="AcrossImguUpload"  width="160rpx" height="160rpx" max-count="1"
						 upload-text="头像面" :action="uploadUrl" :header="uploadHeader" :file-list="adminAcrossImgLst" ></u-upload>
					</view>
					
				</view>
				
				<view style="display: flex;">
					<view style="flex:1;width:50%;">
						<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
							<view class="waste-estimate-title-left">驾驶证照片：</view>
						</view>
						<view class="waste-content-input" style="display: flex;justify-content: center;">
							<u-upload ref="DrivingLicenseImguUpload"  width="160rpx" height="160rpx" max-count="1"
							 upload-text="驾驶证" :action="uploadUrl" :header="uploadHeader" :file-list="siteMasterDrivingLicenseImgList" ></u-upload>
						</view>
					</view>
					<view style="flex:1;width:50%;">
						<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
							<view class="waste-estimate-title-left">行驶证照片：</view>
						</view>
						<view class="waste-content-input" style="display: flex;justify-content: center;">
							<u-upload ref="CarLicenseImguUpload"  width="160rpx" height="160rpx" max-count="1"
							 upload-text="行驶证" :action="uploadUrl" :header="uploadHeader" :file-list="siteMasterCarLicenseImgList" ></u-upload>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view>
			<view class="waste-content box-card">
				<view class="waste-estimate-title" style="padding-bottom: 10rpx;">
					<view class="waste-estimate-title-left">简介：</view>
				</view>
				<view class="waste-content-input">
					<u-input placeholder="请输入简介"  maxlength="200" v-model="admin.siteMasterRemarks" type="textarea"  :auto-height="true" />
				</view>
			</view>
		</view>
		<view class="order-bottom-row">
			<u-button shape="square" type="success" @click="submitAdmin">提交申请</u-button>
		</view>
	</view>
</template>

<script>
	import citySelect from '../u-city-select/u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				labelWidth: 150,
				labelAlign: "right",
				admin:{},
				site:{},
				value:'',
				uploadUrl:this.$u.api.user.getUploadUrl(),
				uploadHeader:this.$u.api.user.getUploadHeader(),
				adminFrontImgList: [],
				adminAcrossImgLst: [],
				siteMasterDrivingLicenseImgList: [],
				siteMasterCarLicenseImgList: [],
				citySelectShow: false,
				addressInfo: {}
			}
		},
		computed:{
			addressShow(){
				if(this.addressInfo?.province === undefined){
					return "请选择期望区域"
				}
				return `${this.addressInfo?.province?.label}，${this.addressInfo?.city?.label}，${this.addressInfo?.area?.label}`
			}
		},
		methods: {
			cityChange(e) {
				this.admin.adminProvince = e.province.label
				this.admin.adminCity = e.city.label
				this.admin.adminDistrict = e.area.label
				this.addressInfo = {...e}
			},
			chooseAddress(){
				this.citySelectShow = true
			},
			submitAdmin(){
				let FrontImg = '', AcrossImg = '', DrivingLicenseImg = '', CarLicenseImg = ''
				let hasUploadFront = false, hasUploadAcross = false, hasUploadDriving = false, hasUploadCar = false
				this.$refs.FrontImguUpload.lists.forEach(item => {
					// console.log(item);
					if(item.progress < 100){
						hasUploadFront = true
						return true
					}
					if(item?.response == undefined && item?.url){
						FrontImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					FrontImg = item.response.data
				})  
				this.$refs.AcrossImguUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadAcross = true
						return true
					}
					if(item?.response == undefined && item?.url){
						AcrossImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					AcrossImg = item.response.data
				})
				this.$refs.DrivingLicenseImguUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadDriving = true
						return true
					}
					if(item?.response == undefined && item?.url){
						DrivingLicenseImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					DrivingLicenseImg = item.response.data
				})
				this.$refs.CarLicenseImguUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadCar = true
						return true
					}
					if(item?.response == undefined && item?.url){
						CarLicenseImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					CarLicenseImg = item.response.data
				})
				if(hasUploadFront || hasUploadAcross || hasUploadDriving || hasUploadCar){
					this.$u.toast('有图片正在上传，请耐心等待')
					return false
				}
				this.admin.siteMasterFrontImg = FrontImg
				this.admin.siteMasterAcrossImg = AcrossImg
				this.admin.siteMasterDrivingLicenseImg = DrivingLicenseImg
				this.admin.siteMasterCarLicenseImg = CarLicenseImg
				
				this.$u.api.site.addSiteMaster(this.admin).then(res => {
					this.$u.toast(res.msg)
					if(res.status != 200){ 
						return false
					}
					setTimeout(function(){
						uni.navigateBack();
					},1000)
				}).catch(err => {
					console.log(err)
					this.$u.toast('提交失败')
				})
			}
		}
	}
</script>

<style>
	.app{padding-bottom: 50rpx;}
	.box-card{ padding: 0;margin-top:14px;}
	/deep/ .u-form-item {padding: 20rpx !important;white-space: nowrap;}
	/deep/ .u-form-item--left {margin-right: 20rpx;}
	/deep/ .u-flex {overflow: hidden !important;}
	/deep/ .u-flex view {overflow: hidden !important;}
	.address-goto-choose {overflow: hidden;width: 100%;display: flex;align-items: center;justify-content: space-between;}
	.address-goto-choose-tips {overflow: hidden;flex: 1;color: #888;font-size: 28rpx;text-overflow: ellipsis;}
	.site-info{overflow: hidden;} 
	.waste-checkbox-group{ display: flex;width:100%;flex-direction: column;}
	.category-panel{width: 100%;}
	.waste-item{ padding:20rpx;border-top: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;}
	.waste-estimate{ }
	.waste-estimate .waste-item{ padding:10rpx 20rpx;}
	.waste-estimate-title{display: flex;align-items: center;padding: 20rpx;}
	.waste-estimate-title-left{flex:1;}
	.waste-estimate-title-right{font-size: 24rpx;color:#aaa;}
	.waste-estimate-right{flex:1;display: flex;align-items: center;margin-left: 20rpx;justify-content: flex-end;}
	.waste-estimate-input{margin:0 10rpx;}
	.waste-estimate-sum{ display: flex;align-items: center;padding:20rpx;border-top: 1rpx solid #eee;}
	.waste-estimate-money{flex:1;text-align: right;}
	.waste-estimate-money-text{font-weight: bold;color:red;margin:0 10rpx;}
	.waste-content-input{padding:0 20rpx 20rpx 20rpx;}
	.order-bottom-row {padding: 20rpx;}
</style>
